<template>
	<view class="trip">
		<view class="top-background"></view>
		<view class="trip-content" :style="{'paddingBottom': issueHeight+'px'}">
			<view class="bj send-receive">
				<view class="send">
					寄
				</view>
				<view class="right line-content">
					<view class="line">
						<view class="label">
							电话
						</view>
						<view class="value">
							<input v-model="form.order_phone" type="number" placeholder="请输入寄件人电话"
								placeholder-class="line-input-placeholder">
						</view>
					</view>
					<view class="line">
						<view class="label">
							起点
						</view>
						<view class="line-right">
							<ChosenPosition :position="{
								recommend: form.start_street,
								address: form.start_address
							}" @change="handlePosition($event, 1)"></ChosenPosition>
						</view>
					</view>
				</view>
			</view>
			<view class="bj send-receive">
				<view class="receive">
					收
				</view>
				<view class="right line-content">
					<view class="line">
						<view class="label">
							电话
						</view>
						<view class="value">
							<input v-model="form.recipient_phone" type="number" placeholder="请输入收件人电话"
								placeholder-class="line-input-placeholder">
						</view>
					</view>
					<view class="line">
						<view class="label">
							终点
						</view>
						<view class="line-right">
							<ChosenPosition :position="{
								recommend: form.recipient_street,
								address: form.recipient_address
							}" @change="handlePosition($event, 2)"></ChosenPosition>
						</view>
					</view>
				</view>
			</view>
			<view class="bj line-content">
				<view class="line">
					<view class="label">
						配送时间
					</view>
					<view class="value">
						<SelectTime :date="time" @change="handleTime" />
					</view>
				</view>
				<view class="line">
					<view class="label">
						宠物信息
					</view>
					<view class="value">
						<PetInformation :data="form" @change="handleInformation" />
					</view>
				</view>
				<view class="line">
					<view class="label">
						宠物价值
					</view>
					<view class="value">
						<PetValue :data="form.pet_price" @change="form.pet_price = $event" />
					</view>
				</view>
				<!-- <view class="line">
					<view class="label">
						感谢费
					</view>
					<view class="right">
						<view class="value">
							<input v-model="form.thank_money" type="number" placeholder="请输入感谢费"
								placeholder-class="line-input-placeholder">
						</view>
						<view class="unit">
							元
						</view>
					</view>
				</view> -->
			</view>
			<view class="bj matter-content">
				<view class="title">
					注意事项
				</view>
				<view class="matter">
					<view class="matter-line" @click="handleMatterClick(item.id)"
						:class="matter.indexOf(item.id) != -1&&'checked'" v-for="(item, index) in matters" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view class="desc">
					{{ matterDesc }}
				</view>
			</view>
			<view class="bj way line-content">
				<up-radio-group v-model="form.delivery_type" placement="column">
					<view class="line">
						<view class="left">
							<view class="label">拼车</view>
							<view class="desc">公摊车费超划算</view>
						</view>
						<up-radio :name="1" activeColor="#f1692b">
						</up-radio>
					</view>
					<view class="line">
						<view class="left">
							<view class="label">独享</view>
							<view class="desc">独享车辆，快捷、省时、省心</view>
						</view>
						<up-radio :name="2" activeColor="#f1692b">
						</up-radio>
					</view>
				</up-radio-group>
			</view>
			<!-- 发布订单页面 -->
			<Issue :type="sumbitType" :price="orderPrice.order_total_amount"
				@priceClick="ExpenseBreakdownRef.handleClick()" @sumbit="PopupRef.handleClick()" />
		</view>
		<Popup ref="PopupRef" :data="form" :address1="{
								recommend: form.start_street,
								address: form.start_address
							}" :address2="{
								recommend: form.recipient_street,
								address: form.recipient_address
							}" />
		<ExpenseBreakdown ref="ExpenseBreakdownRef" :data="orderPrice" />
	</view>
</template>

<script setup>
	import ChosenPosition from './components/chosen_position.vue'
	import SelectTime from './components/select_time.vue'
	import PetInformation from './components/pet_information.vue'
	import PetValue from './components/pet_value.vue'
	import ExpenseBreakdown from '@/components/ExpenseBreakdown.vue'
	import Issue from './components/issue.vue'
	import Popup from './components/popup.vue'
	import {
		ref,
		watch,
		onMounted
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useTripStore
	} from '@/store/index.js'
	import utils from '@/utils/util';
	import trip from '@/api/trip.js'
	onShow(() => {
		let detail = useTripStore().detail
		if (Object.keys(detail).length > 0) {
			form.value = detail
			delete form.value.id
			form.value.delivery_type = detail == '拼车' ? 1 : 2
			form.value.delivery_earliest_time = detail.delivery_earliest_time_val
			form.value.delivery_latest_time = detail.delivery_latest_time_val
			form.value.attention_item = detail.attention_item_id
			setTimeout(() => {
				matter.value = detail.attention_item_id.map(Number)
			}, 200)
			changeType()
			time.value = [detail.delivery_earliest_time_val, detail.delivery_latest_time_val]
			console.log('form', form.value);
		}
	})
	// 配送时间
	const time = ref([])
	const form = ref({
		order_phone: '',
		start_province: '',
		start_city: '',
		start_county: '',
		start_address: '',
		start_street: '',
		start_longitude: '',
		start_latitude: '',
		recipient_phone: '',
		recipient_province: '',
		recipient_city: '',
		recipient_county: '',
		recipient_address: '',
		recipient_stree: '',
		recipient_longitude: '',
		recipient_latitude: '',
		delivery_earliest_time: '',
		delivery_latest_time: '',
		attention_item: '',
		pet_price: '',
		delivery_type: 0,
		thank_money: '',
		people_num: '',
		luggage_info: '',
		pet_img: []
	})
	// 选择地址
	const handlePosition = (e, type) => {
		console.log(e);
		if (type == 1) {
			form.value.start_province = e.province
			form.value.start_city = e.city
			form.value.start_county = e.district
			form.value.start_street = e.recommend
			form.value.start_address = e.address
			form.value.start_longitude = e.lng
			form.value.start_latitude = e.lat
		} else {
			form.value.recipient_province = e.province
			form.value.recipient_city = e.city
			form.value.recipient_county = e.district
			form.value.recipient_street = e.recommend
			form.value.recipient_address = e.address
			form.value.recipient_longitude = e.lng
			form.value.recipient_latitude = e.lat
		}
	}
	// 选择时间
	const handleTime = (e) => {
		console.log(e);
		time.value = e
		form.value.delivery_earliest_time = e[0]
		form.value.delivery_latest_time = e[1]
	}
	// 宠物信息
	const handleInformation = (e) => {
		for (let i in e) {
			form.value[i] = e[i]
		}
	}
	// 注意事项
	const matter = ref([])
	const matters = ref([])
	const matterDesc = ref()
	onMounted(() => {
		attentionItem()
	})
	const attentionItem = async () => {
		const {
			status,
			info,
			data
		} = await trip.attentionItem()
		if (status == 1) {
			matters.value = data.item
			matterDesc.value = data.text
		}
	}
	const handleMatterClick = (val) => {
		let index = matter.value.indexOf(val)
		if (index != -1) {
			matter.value.splice(index, 1)
		} else {
			matter.value.push(val)
		}
		form.value.attention_item = matter.value.toString()
	}
	const sumbitType = ref(false)
	watch(form.value, () => {
		changeType()
	})
	const changeType = () => {
		let whiteList = ['start_longitude', 'start_latitude', 'recipient_longitude', 'recipient_latitude', ]
		let type = true
		whiteList.forEach(item => {
			if (!form.value[item]) type = false
		})
		console.log(type);
		sumbitType.value = type
		if (type) {
			calculateOrderTotalPrice()
		}
	}
	// 订单详情
	const orderPrice = ref({})
	const calculateOrderTotalPrice = async () => {
		const {
			status,
			info,
			data
		} = await trip.calculateOrderTotalPrice(form.value)
		if (status == 1) {
			orderPrice.value = data
		}
	}
	// 底部高度
	const issueHeight = ref(0)
	onMounted(() => {
		issueHeight.value = utils.windowBottom() + 93 + 10
	})
	// 费用明细弹框
	const ExpenseBreakdownRef = ref()
	// 发布订单弹框
	const PopupRef = ref()
</script>

<style lang="scss" scoped>
	.trip {
		padding-top: 40rpx;
	}

	.trip-content {
		position: relative;
	}

	.bj {
		background: #fff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(128, 128, 128, 0.06);
		border-radius: 32rpx;
		width: calc(100% - 56rpx);
		padding: 0 22rpx;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.bj+.bj {
		margin-top: 12rpx;
	}

	.send-receive {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.send {
			background: #f1692b;
		}

		.receive {
			background: #689930;
		}

		.send,
		.receive {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 23rpx;
		}

		.right,
		.line-right {
			width: calc(100% - 60rpx);
		}
	}

	.matter-content {
		padding: 22rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #2C1F21;
			line-height: 33rpx;
		}

		.matter {
			margin: 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.matter-line {
				width: calc((100% - 40rpx) / 3);
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid;
				border-radius: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 33rpx;
				background: #f6f6f6;
				border-color: #f6f6f6;
				color: #A6A1A1;
				margin-bottom: 20rpx;
			}

			.checked {
				background: #fff8f8;
				border-color: #F1692B;
				color: #F1692B;
			}
		}

		.desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #A6A1A1;
			line-height: 23rpx;
			margin-top: 10rpx;
			white-space: pre;
		}
	}

	.way {
		.desc {
			margin-top: 10rpx;
			color: #A6A1A1 !important;
		}
	}
</style>